<template>
  <div class="login-form">
    <div class="top-login">
      <span><img src="../../assets/images/group.png" alt=""/></span>
    </div>
    <h1>登录</h1>
    <div class="login-top">
      <Form ref="userInfo" :model="userInfo" :rules="ruleInline">
        <FormItem prop="username">
          <Input type="text" v-model="userInfo.username" placeholder="Username">
            <Icon type="ios-person-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem prop="password">
          <Input type="password" v-model="userInfo.password" placeholder="Password">
            <Icon type="ios-locked-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem style="text-align:center;">
          <Button type="primary" @click="doLogin('userInfo')">登录</Button>
          <Button type="error" @click="reset">重置</Button>
        </FormItem>
      </Form>
    </div>
    <p class="copy">@lscho</p>
  </div>
</template>

<script>
  //import {token, user} from "@/api/index";
  import "@/assets/css/login.css";
  import {Button, Form, FormItem, Icon, Input} from "iview";
  import "iview/dist/styles/iview.css";
  import {mapActions, mapGetters, mapState} from 'vuex'

  export default {
    components: {
      Form,
      FormItem,
      Icon,
      Input,
      Button
    },
    data() {
      return {
        userInfo: {
          username: "",
          password: ""
        },
        ruleInline: {
          username: [
            {required: true, message: "请填写用户名", trigger: "blur"}
          ],
          password: [
            {required: true, message: "请填写密码", trigger: "blur"},
            {
              type: "string",
              min: 6,
              message: "密码长度不能小于6位",
              trigger: "blur"
            }
          ]
        }
      };
    },
    computed: {
      ...mapGetters({
        verifyToken: "token/verifyToken"
      }),
      ...mapState(['hasLogin']),
    },
    mounted() {
      //检测token是否有效
      if(this.verifyToken && this.hasLogin) {
        this.$router.push({
          name: "AdminIndex"
        });
      }
    },
    methods: {
      //...mapMutations(['setToken', 'setUserName']),
      ...mapActions(['login']),

      doLogin(name) {
        this.$refs[name].validate(async (valid) => {
          if(valid) {
            //token.create(this.userInfo).then(res => {
            //  if(res.errno === 0 && res.data.token) {
            //    this.$store.commit("setUserName", this.userInfo.username);
            //    this.$store.commit("setToken", res.data.token);
            //
            //
            //    user.getInfoByName(this.userInfo.username).then(res => {
            //      if(res.errno === 0) {
            //        this.$store.commit("setUserInfo", res.data);
            //        this.$router.push("/home");
            //      }
            //    });
            //  }
            //});
            if(await this.login(this.userInfo)) {
              this.$router.push("/home");
            } else {
              this.$Message.error("用户账号或密码不正确");
            }
          } else {
            this.$Message.error("请填写必要信息");
          }
        });
      },
      reset() {
        this.userInfo = {
          username: "",
          password: ""
        };
      }
    }
  };
</script>
